<template>
  <!-- 老结算明细 详情 -->
  <el-dialog title="油站账单明细详情" :visible.sync="dialogVisible" :close-on-click-modal="closeModal" :close-on-press-escape="closeEscape" :before-close="close" class="bill-detail-dialog" width="800px">
    <div class="bill-detail-wrapper">
      <el-form ref="billInfo" label-width="100px" :label-position="'right'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="序号:">
              <span>{{billInfo.id}}</span>
            </el-form-item>
            <el-form-item label="订单号:">
              <span>{{billInfo.orderCode}}</span>
            </el-form-item>
            <el-form-item label="油站编码:">
              <span>{{billInfo.gasId}}</span>
            </el-form-item>
            <el-form-item label="账单类型:">
              <span>{{billInfo.billTypeName}}</span>
            </el-form-item>
            <el-form-item label="应收应付金额:">
              <span>{{billInfo.amount}}</span>
            </el-form-item>
            <el-form-item label="升数:">
              <span>{{billInfo.litre}}</span>
            </el-form-item>
            <el-form-item label="状态:">
              <span>{{billInfo.statusName}}</span>
            </el-form-item>
            <el-form-item label="油站所属地:">
              <span>{{billInfo.address}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单ID:">
              <span>{{billInfo.orderId}}</span>
            </el-form-item>
            <el-form-item label="账单号:">
              <span>{{billInfo.billNumber}}</span>
            </el-form-item>
            <el-form-item label="加油站名称:">
              <span>{{billInfo.gasName}}</span>
            </el-form-item>
            <el-form-item label="账单科目:">
              <span>{{billInfo.billSubjectsName}}</span>
            </el-form-item>
            <el-form-item label="枪价:">
              <span>{{billInfo.unitPrice}}</span>
            </el-form-item>
            <el-form-item label="枪号:">
              <span>{{billInfo.gunNo}}</span>
            </el-form-item>
            <el-form-item label="油号:">
              <span>{{billInfo.oilNo}}</span>
            </el-form-item>
            <el-form-item label="订单结算时间:">
              <span>{{billInfo.orderSettlementTime}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import dialog from '@mix/dialog'
import { getOldFlowDetailApi} from '@/api/finance'
export default {
  mixins: [dialog],
  props:{
    billId:[String,Number]
  },
  data(){
    return {
      billInfo:{}
    }
  },
  created(){
    this.initPage()
  },
  methods:{
    initPage(){
      this.getDetai()
    },
    async getDetai(){
      try{
        const {code,result={}} = await getOldFlowDetailApi({id:this.billId})
        if(code !== 200) return 
        this.billInfo = result
      }catch(e){
        console.log(e)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.bill-detail-dialog{
  .el-form-item {
    margin-bottom: 5px;
  }
}
</style>